<!-- author: lizq -->
<!-- date: 2022-06-23 16:35:19 -->
<!-- description: table- 分页器 -->
<template>
  <div class="pagination">
    <el-pagination v-model:page-size="size" v-model:current-page="currentPage" :page-sizes="pageSizes" :layout="layout" :total="total" background>
    </el-pagination>
  </div>
</template>

<script setup>
const $props = defineProps({
  pageNo: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 10
  },
  total: {
    type: Number,
    default: 0
  },
  layout: {
    type: String,
    default: "total, sizes, prev, pager, next, jumper"
  },
  pageSizes: {
    type: Array,
    default: () => [10, 20, 40, 60, 100]
  }
});
const $emit = defineEmits(["update:pageSize", "update:pageNo", "getList"]);

const size = computed({
  get: () => $props.pageSize,
  set: (val) => updateList(val, 1)
});
const currentPage = computed({
  get: () => $props.pageNo,
  set: (val) => updateList(val, 2)
});

//更新列表
const updateList = (val, type) => {
  if (type == 1) {
    $emit("update:pageSize", val);
  } else {
    $emit("update:pageNo", val);
  }
  $emit("getList");
};
</script>

<style lang="scss" scoped>
.pagination {
  height: 32px;
  margin-top: 20px;
  //分页器
  .el-pagination {
    float: right;
  }
}
</style>
